"use client"
import React, { FC, useState } from "react"
import { z } from "zod"
import Link from "next/link"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Button } from "@/components/ui/button"
import { Eye, EyeOff, Lock, Mail } from "lucide-react"

type Props = {
  onSwitchToRegister: () => void
}

const formSchema = z.object({
  email: z.email({ message: "请输入有效的邮箱地址" }),
  password: z.string().min(6, { message: "密码长度不能小于6位" }),
  rememberMe: z.boolean().optional()
})

/**
 * 登录表单
 */
const LoginForm: FC<Props> = (props: Props) => {
  const { onSwitchToRegister } = props

  const [showPassword, setShowPassword] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
      password: "",
      rememberMe: false
    }
  })

  const onSubmit = (values: z.infer<typeof formSchema>) => {
    setIsSubmitting(true)
    console.log("🚀 ~ onSubmit ~ values:", values)
    setIsSubmitting(false)
  }

  return (
    <div>
      <div className="text-2xl font-bold text-center">登录</div>

      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <div className="space-y-4">
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>邮箱</FormLabel>
                  <FormControl>
                    <div className="relative">
                      <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 h-4 w-4" />
                      <Input className="pl-10" type="email" placeholder="name@example.com" {...field} />
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>密码</FormLabel>
                  <FormControl>
                    <div className="relative">
                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 h-4 w-4" />
                      <Input
                        className="pl-10"
                        type={showPassword ? "text" : "password"}
                        placeholder="请输入密码"
                        {...field}
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                        onClick={() => setShowPassword(!showPassword)}
                      >
                        {showPassword ? (
                          <EyeOff className="h-4 w-4 text-gray-400" />
                        ) : (
                          <Eye className="h-4 w-4 text-gray-400" />
                        )}
                      </Button>
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <div className="flex items-center justify-between">
              <FormField
                control={form.control}
                name="rememberMe"
                render={({ field }) => (
                  <FormItem>
                    <FormControl>
                      <div className="flex items-center">
                        <Checkbox id="remember-me" checked={field.value} onCheckedChange={field.onChange} />
                        <label htmlFor="remember-me" className="text-sm ml-1">
                          记住我
                        </label>
                      </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Link href="/" className="text-sm">
                忘记密码?
              </Link>
            </div>
          </div>

          <div className="flex flex-col mt-8">
            <Button className="w-full" type="submit" disabled={isSubmitting}>
              {isSubmitting ? "登录中..." : "登录"}
            </Button>
            <div className="mt-4 text-center text-sm">
              还没有账户?{" "}
              <Button type="button" variant="link" className="px-0" onClick={onSwitchToRegister}>
                立即注册
              </Button>
            </div>
          </div>
        </form>
      </Form>
    </div>
  )
}

export default LoginForm
